<template>
    <div class="app-container">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="110px">
        <el-form-item label="请输入群ID" prop="groupId">
          <el-input v-model="queryParams.groupId" placeholder="请输入群ID" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="请输入群昵称" prop="groupName">
          <el-input v-model="queryParams.groupName" placeholder="请输入群昵称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="群聊类型" prop="type">
          <el-select v-model="queryParams.type" placeholder="请选择群聊类型" clearable>
            <el-option v-for="dict in dict.type.groupchat_type" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="群所在家乡" prop="hometownAddress">
          <el-input v-model="queryParams.hometownAddress" placeholder="群所在家乡" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="创建用户ID" prop="createBy">
          <el-input v-model="queryParams.createBy" placeholder="创建用户ID" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="创建用户昵称" prop="createUserName">
          <el-input v-model="queryParams.createUserName" placeholder="创建用户昵称" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="群主" prop="ownerUserName">
          <el-input v-model="queryParams.ownerUserName" placeholder="群主" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="群管理员" prop="adminUserName">
          <el-input v-model="queryParams.adminUserName" placeholder="群管理员" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="群聊状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择群聊状态" clearable>
            <el-option v-for="dict in dict.type.groupchat_status" :key="dict.value" :label="dict.label"
              :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间区间">
          <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
            range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="orderheadList" style="width: 100%">
        <el-table-column label="群ID" prop="groupId">
        </el-table-column>
        <el-table-column label="群昵称" prop="groupName">
        </el-table-column>
        <el-table-column label="群聊类型" prop="type">
          <template slot-scope="scope">
          <dict-tag :options="dict.type.groupchat_type" :value="scope.row.type" />
        </template>
        </el-table-column>
        <el-table-column label="当前群聊人数" prop="groupUserNum">
        </el-table-column>
        <el-table-column label="群所在家乡" prop="hometownAddress">
        </el-table-column>
        <el-table-column label="创建用户ID" prop="createBy">
        </el-table-column>
        <el-table-column label="创建用户昵称" prop="createUserName">
        </el-table-column>
        <el-table-column label="群主" prop="ownerUserName">
        </el-table-column>
        <el-table-column label="群管理员" prop="adminUserName">
        </el-table-column>
        <el-table-column label="群聊状态" prop="status">
          <template slot-scope="scope">
          <dict-tag :options="dict.type.groupchat_status" :value="scope.row.status" />
        </template>
        </el-table-column>
        <el-table-column label="创建时间" prop="createTime">
        </el-table-column>
        <el-table-column label="操作" prop="nickName">
        </el-table-column>
      </el-table>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
        @pagination="getList" />
    </div>
  </template>
  <script>
    import {
        chatGroupList
    } from "@/api/store/homeTownNet";
  
    export default {
      name: "Orderhead",
      dicts: ['groupchat_type','groupchat_status' ],
      data() {
        return {
          // 遮罩层
          loading: true,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 订单表头表格数据
          orderheadList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            groupId: null,  //请输入群ID
            groupName: null,   //请输入群昵称
            type: null,  //群聊类型
            hometownAddress: null,   //群所在家乡
            createBy: null,  //创建用户ID
            createUserName: null,  //创建用户昵称
            ownerUserName: null,  //群主
            adminUserName:null,
            status: null,   //群聊状态
            startDate: null,  //时间区间
            endDate: null,  //请输入群ID
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {},
          dateRange: []
        };
      },
      created() {
        this.getList();
      },
      methods: {
        getStatus(res) {
          return res === '0' ?
            '待付款' :
            res === '5' ?
            '待发货' :
            res === '1' ?
            '待发货' :
            res === '6' ?
            '已发货' :
            res === '2' ?
            '已发货' :
            res === '3' ?
            '完成' :
            res === '4' ?
            '售后' :
            res === '7' ?
            '完成' :
            res === '8' ?
            '退款' :
            res === '9' ?
            '退货退款' :
            res === '10' ?
            '交易关闭' :
            '其他'
        },
        /** 查询订单表头列表 */
        getList() {
          let params = {
            groupId: this.queryParams.groupId,  //请输入群ID
            groupName: this.queryParams.groupName,   //请输入群昵称
            type: this.queryParams.type,  //群聊类型
            hometownAddress: this.queryParams.hometownAddress,   //群所在家乡
            createBy: this.queryParams.createBy,  //创建用户ID
            createUserName: this.queryParams.createUserName,  //创建用户昵称
            ownerUserName: this.queryParams.ownerUserName,  //群主
            adminUserName: this.queryParams.adminUserName,
            status: this.queryParams.status,   //群聊状态
            startDate: this.dateRange[0],
            endDate: this.dateRange[1],
            pageSize: this.queryParams.pageSize,
            pageNum: this.queryParams.pageNum
          }
          chatGroupList(params).then(res => {
            if (res.code == '200') {
              this.orderheadList = res.rows
            }
            this.total = res.total
          });
        },
        // 取消按钮
        cancel() {
          this.open = false;
          this.reset();
        },
        // 表单重置
        reset() {
          this.form = {
            orderSerial: null,
            userId: null,
            addressId: null,
            totalAmount: null,
            couponFlag: null,
            coupon: null,
            actualAmount: null,
            emsFlag: null,
            emsFreight: null,
            orderStatus: null,
            successFlag: null,
            paySerial: null,
            orderTime: null,
            payTime: null,
            payMethods: null,
            deliveryMethod: null,
            orderRemark: null,
            invoiceFlag: null,
            delFlag: null,
            crTime: null,
            upTime: null,
            headFeild1: null,
            headFeild2: null,
            headFeild3: null,
            headFeild4: null,
            headFeild5: null
          };
          this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
          this.queryParams.pageNum = 1;
          this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
          this.dateRange = []
          this.queryParams.maxNum = null
          this.queryParams.ruleId = null
          this.resetForm("queryForm");
          this.handleQuery();
        },
        // 多选框选中数据
        handleSelectionChange(selection) {
          this.ids = selection.map(item => item.orderSerial)
          this.single = selection.length !== 1
          this.multiple = !selection.length
        },
        /** 提交按钮 */
        submitForm() {
          this.$refs["form"].validate(valid => {
            if (valid) {
              if (this.form.orderSerial != null) {
                updateOrderhead(this.form).then(response => {
                  this.$modal.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                });
              } else {
                addOrderhead(this.form).then(response => {
                  this.$modal.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                });
              }
            }
          });
        },
      }
    };
  </script>
  <style>
    .br /deep/ .el-descriptions__header {
      display: none !important;
    }
  
    .ec-input-range-divider {
      width: 10px;
      height: 2px;
      background-color: #333;
      margin: 0 auto;
    }
  </style>
  